<!-- rem适配 001 -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="manifest" href="mainfest.json">
		<title>
			REM适配001
		</title>
		<style>
		*{
			margin:0;
			padding:0;
		}
			body,html{
				background: gray;
				width: 100%;
				height: 100%;
			}
			#header{
				width:7.50rem;
				height: 1.45rem;
				background: #ffffff;
			}
			#tools{
				margin-top: 0.2rem;
				width: 7.50rem;
				height: 1.85rem;
				background: #ffffff;
			}
			.container{
				width: 90.666%;
				margin:0 auto;
			}
			.name,.operate{
				line-height: 1.45rem;
				font-size: 0.28rem;
			}
			.name{
				float: left;
			}
			.operate{
				float: right;
			}
			#banner{
				margin-top: 0.2rem;
				width: 7.50rem;
				height: 3.85rem;
				background:#ffffff;
			}
			#banner img{
				width: 100%;
			}
			#list{
				margin-top: 0.2rem;
				width: 7.50rem;
				height: 6.7rem;
				background: #ffffff;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div class="container">
				<p class="name">渣渣会</p>
				<p class="operate">积分</p>

			</div>
		</div>

		<div id="tools">
			
		</div>

		<div id="banner">
			<img src="banner.png" alt="BANNER">

		</div>
		
		<div id="list"> 
			
		</div>
		<div >
			
		</div>
	</body>
	<script type="text/javascript">


     ~function (d, w) {
        var docEl = d.documentElement,resizeEvt = 'orientationchange' in w ? 'orientationchange' : 'resize',
        recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
        if (!d.addEventListener) return;
        w.addEventListener(resizeEvt, recalc, false);
        d.addEventListener('DOMContentLoaded', recalc, false);
    }(document, window);
   </script>

</html>